<template>
    <div class="new_calendar" v-if="newCalendarShow" @click.stop.prevent="">
      <div class="calendar_title">
        <div class="cadtitle_l">
          {{
            newCalendarTitle == 1
              ? "新建日程"
              : newCalendarTitle == 2
              ? "我的日程"
              : newCalendarTitle == 4
              ? "修改日程"
              : "日程提醒"
          }}
        </div>
        <Tooltip content="编辑日程" placement="bottom">
          <div
            class="cadtitle_r"
            v-if="newCalendarTitle != 1 && newCalendarTitle != 3"
          >
            <span
              class="calendar_compile"
              @click.stop.prevent="newCalendarClick(4)"
            ></span>
          </div>
        </Tooltip>
        <Tooltip content="删除日程" placement="bottom">
          <div
            class="cadtitle_r"
            v-if="newCalendarTitle != 1 && newCalendarTitle != 3"
          >
            <span class="calendar_del" @click.stop.prevent="delSchedule"></span>
          </div>
        </Tooltip>
      </div>
      <div class="calendar_main">
        <div class="schedule_content">
          <span></span>
          <input
            type="text"
            v-model="scheduleText"
            placeholder="添加日程内容"
            v-if="newCalendarTitle == 1 || newCalendarTitle == 4"
          />
          <div v-else class="schedule_content_text">
            {{ currentAgenda.THEME ? currentAgenda.THEME : "无内容" }}
          </div>
        </div>
        <div class="schedule_loaction">
          <span></span>
          <input
            v-if="newCalendarTitle == 1 || newCalendarTitle == 4"
            type="text"
            v-model="scheduleAddress"
            placeholder="请输入地址"
          />
          <div v-else class="loacation_text">
            {{ currentAgenda.PLACE ? currentAgenda.PLACE : "无内容" }}
          </div>
        </div>
        <div class="schedule_people" v-if="newCalendarTitle != 3">
          <!-- 人员图标 -->
          <span></span>
          <div
            @click.stop.prevent="addReminders"
            v-if="newCalendarTitle == 1 || newCalendarTitle == 4"
            class="add_reminders_text"
          >
            <span v-show="participant.length <= 0" class="add_reminders"
              >添加提醒人</span
            >
            <template v-for="item in participant">
              {{ item.name ? item.name + ";" : "" }}
            </template>
          </div>
          <div v-else class="participant_text">
            {{ currentAgenda.NAME ? currentAgenda.NAME : "暂无添加人员" }}
          </div>
        </div>
        <div class="schedule_time">
          <span></span>
          <div
            class="schedule_time_wrap"
            v-if="newCalendarTitle == 1 || newCalendarTitle == 4"
          >
            <template v-if="!isAllday">
              <!-- <Date-picker type="datetime" :value="startTime"  @on-change="startTimeChange" :options="datepickerOptions"  placeholder="开始时间" style="width: 155px;margin-right:3px;"></Date-picker>至
						<Date-picker type="datetime" :value="endTime"  @on-change="endTimeChange" :options="datepickerOptions"  placeholder="结束时间" style="width: 155px;margin-left:3px;"></Date-picker> -->
              <el-date-picker
                prefix-icon="none"
                :default-value="new Date()"
                v-model="startTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                size="mini"
                type="datetime"
                :picker-options="datepickerOptions"
                @change="startTimeChange"
                placeholder="开始时间"
                style="width: 155px; margin-right: 3px; z-index: 9999"
              ></el-date-picker
              >至
              <el-date-picker
                prefix-icon="none"
                :default-value="new Date()"
                v-model="endTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                size="mini"
                align="right"
                type="datetime"
                :picker-options="datepickerOptions"
                @change="endTimeChange"
                placeholder="结束时间"
                style="width: 155px; margin-right: 3px; z-index: 9999"
              ></el-date-picker>
            </template>

            <template v-else>
              <!-- <Date-picker type="date" :value="endTime"  @on-change="endTimeChange" :options="datepickerOptions"  placeholder="结束时间" style="width: 155px;margin-left:3px;"></Date-picker> -->
              <el-date-picker
                prefix-icon="none"
                :default-value="new Date()"
                v-model="startTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                size="mini"
                type="date"
                :picker-options="datepickerOptions"
                @change="startTimeChange"
                placeholder="开始时间"
                style="width: 155px; margin-right: 3px; z-index: 9999"
              ></el-date-picker
              >至
              <el-date-picker
                prefix-icon="none"
                :default-value="new Date()"
                v-model="endTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                size="mini"
                align="right"
                type="date"
                :picker-options="datepickerOptions"
                @change="endTimeChange"
                placeholder="结束时间"
                style="width: 155px; margin-right: 3px; z-index: 9999"
              ></el-date-picker>
            </template>
          </div>
          <div v-else class="schedule_time_text">
            {{ currentAgenda.STARTTIME }}至{{ currentAgenda.ENDTIME }}
          </div>
        </div>

        <div
          class="is_allday"
          v-if="newCalendarTitle == 1 || newCalendarTitle == 4"
        >
          <span></span>
          <div @click="isAllday = !isAllday">
            <Checkbox v-model="isAllday"></Checkbox>全天
          </div>
        </div>
        <div class="is_repeat">
          <span></span>
          <select
            v-model="repeatPlan"
            v-if="newCalendarTitle == 1 || newCalendarTitle == 4"
          >
            <option
              v-for="(item, index) in repeatPlanList"
              :value="item.value"
              :key="'repeat_' + index"
            >
              {{ item.text }}
            </option>
          </select>
          <div v-else>
            {{
              currentAgenda.REPEATPLAN
                ? repeatPlanList[currentAgenda.REPEATPLAN]
                  ? repeatPlanList[currentAgenda.REPEATPLAN].text
                  : "无计划"
                : "无计划"
            }}
          </div>
        </div>

        <div class="repeat_time">
          <span></span>
          <div
            class="repeat_time_wrap"
            v-if="newCalendarTitle == 1 || newCalendarTitle == 4"
          >
            <!-- <Date-picker type="datetime" :value="endRemindTime" @on-change="endRemindTimeChange" :options="datepickerOptions" placeholder="结束重复时间" style="width: 100%"></Date-picker> -->
            <el-date-picker
              prefix-icon="none"
              v-model="endRemindTime"
              :disabled="isDisabled"
              value-format="yyyy-MM-dd HH:mm:ss"
              size="mini"
              type="datetime"
              @change="endRemindTimeChange"
              placeholder="结束重复时间"
              style="width: 100%; z-index: 9999"
            ></el-date-picker>
          </div>
          <div v-else>
            <div class="repeat_time_text">
              <span v-if="currentAgenda.ENDREMINDTIME == '9999-01-01 00:00:00'"
                >无截止时间</span
              >
              <span v-else>{{ currentAgenda.ENDREMINDTIME }}截止</span>
            </div>
          </div>
        </div>

        <!-- <div v-if="currentAgenda.ENDREMINDTIME == '9999-01-01 00:00:00'" class="repeat_time_text"></div> -->

        <div class="reminder_time">
          <span></span>
          <select
            v-if="newCalendarTitle == 1 || newCalendarTitle == 4"
            v-model="remindTime"
          >
            <option
              v-for="(item, index) in remindTimeList"
              :value="item.value"
              :key="'remind_' + index"
            >
              {{ item.text }}
            </option>
          </select>
          <div v-else>
            {{
              currentAgenda.REMINDTIME
                ? remindTimeList[currentAgenda.REMINDTIME]
                  ? remindTimeList[currentAgenda.REMINDTIME].text
                  : "无提醒时间"
                : "无提醒时间"
            }}
          </div>
        </div>
        <div class="calendar_footer">
          <div
            v-if="newCalendarTitle == 1 || newCalendarTitle == 4"
            style="display: flex"
          >
            <span @click.stop.prevent="scheduleSub" class="calendar_adopt"
              >确定</span
            ><span class="calendar_refuse" @click="calendar_close">取消</span>
          </div>
          <span
            v-else
            @click="calendar_close"
            style="margin-left: 0"
            class="calendar_close"
            >关闭</span
          >
        </div>
      </div>
    </div>
</template>

<script>
export default {
  name: "newCalendar",
  props: {
    addReminders: {
      type: Array,
      default: () => {
        return [];
      }
    },
    currentAgenda: {
      type: Object,
      default: () => {
        return {};
      }
    },
    newCalendarTitle:{
        type:String,
        default:''
    }
  },
  data() {
    return {};
  },
  watch: {},
  methods: {
    calendar_close() {
      this.$emit("calendar_close");
    },
    toNewChat(i, b) {
      this.$emit("toNewChat", i, b);
    },
    dbtoNewChat(i, b) {
      this.$emit("dbtoNewChat", i, b);
    }
  },
  created() {}
};
</script>
